<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <style>
        /* 样式 */
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        .room {
            height: 100%;
            width: 100%;
        }

        .room {
            display: flex;
        }

        .left {
            width: 300px;
            border-right: 0.5px solid #f5f5f5;
            background: #333;
        }

        .right {
            background: #1c1c1c;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: #8d0eb0;
            color: white;
            padding: 10px;
            box-sizing: border-box;
            font-size: 20px;
        }

        .main {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            font-size: 20px;
            overflow: auto;
        }

        .main-chat {
            color: green;
        }

        .main-self {
            color: white;
            background-color: cadetblue;
        }

        .footer {
            min-height: 200px;
            border-top: 1px solid green;
        }

        .footer .ipt {
            width: 100%;
            height: 100%;
            color: green;
            outline: none;
            font-size: 20px;
            padding: 10px;
            box-sizing: border-box;
        }

        .groupList {
            height: 100%;
            overflow: auto;
        }

        .groupList-items {
            height: 50px;
            width: 100%;
            background: #131313;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="room">
        <div class="left">
            <div class="groupList">
    
            </div>
        </div>
        <div class="right">
            <header class="header">聊天室</header>
            <main class="main">
    
            </main>
            <footer class="footer">
                <!-- 设置 contenteditable 变成可编辑的 -->
                <div class="ipt" contenteditable></div>
            </footer>
        </div>
    </div>
    <!-- 
        使用 module 就可以在script标签脚本中使用 import 了， 并且可以远程cdn
    <script type="module">
        
        import { io } from "https://cdn.socket.io/4.7.5/socket.io.esm.min.js";
      
        const socket = io();
    </script>
    -->
    

    <!-- 
        或者也可以这样
        先声明 importmap
        然后使用 script 标签引入 socket.io-client
    <script type="importmap">
        {
            "imports": {
            "socket.io-client": "https://cdn.socket.io/4.7.5/socket.io.esm.min.js"
            }
        }
    </script>

    <script type="module">
        import { io } from "socket.io-client";

        const socket = io();
    </script>
    -->

    <script type="module">

        // 提取发送消息的方法，自己发送的自己广播不到，就单独添加一下
        const sendMessage = (message, self) => {
            const div = document.createElement('div');
            div.className = 'main-chat';
            if(self) {
                div.className = 'main-self';   // 自己的跟广播的作一些区别
            }
            div.innerText = `${message.name}:${message.msg}`;
            main.appendChild(div)
        }
        const groupEl = document.querySelector('.groupList');
        const main = document.querySelector('.main');
        import { io } from "https://cdn.socket.io/4.7.4/socket.io.esm.min.js";
        const name = prompt('请输入你的名字');   // 原生输入弹出框
        const room = prompt('请输入房间号');
        const socket = io('ws://localhost:3000');
        //键盘按下发送消息
        document.addEventListener('keydown', (e) => {   // 事件代理
            if (e.key === 'Enter') {   // 只有 enter键发送
                e.preventDefault();
                const ipt = document.querySelector('.ipt');
                socket.emit('message', {   // emit 发送消息
                    msg: ipt.innerText,
                    room: room,
                    name: name
                });
                sendMessage({
                    msg: ipt.innerText,
                    name: name,
                }, true)
                ipt.innerText = '';  // 清空一下
            }
        })
        //连接成功socket
        socket.on('connect', () => {
            socket.emit('join', { name, room });     //加入一个房间
            socket.on('message', (message) => {     // 监听消息，广播到的
                sendMessage(message)
            })
            socket.on('groupList', (groupList) => {    // 后台接口发送群组分布
                console.log(groupList);
                groupEl.innerHTML = ''
                Object.keys(groupList).forEach(key => {
                    const item = document.createElement('div');
                    item.className = 'groupList-items';
                    item.innerText = `房间名称:${key} 房间人数:${groupList[key].length}`
                    groupEl.appendChild(item)
                })
            })
        })

    </script>
</body>
</html>